<template>
	<view>
		<view class="head"><image :src="imgUrl"></image></view>
		<!-- 标题简介 -->
		<view class="introduce-section">
			<text class="title">恒源祥2019春季长袖白色t恤 新款春装</text>
			<view class="price-box">
				<text class="price-tip">¥</text>
				<text class="price">341.6</text>
				<text class="m-price">¥488</text>
				<text class="coupon-tip">7折</text>
			</view>
			<view class="bot-row">
				<text>销量: 108</text>
				<text>库存: 4690</text>
				<text>浏览量: 768</text>
			</view>
		</view>
		<!--  分享 -->
		<view class="share-section" @click="share">
			<text class="share">返</text>
			<text class="tit">该商品分享可领49减10红包</text>
			<text class="share-btn">立即分享</text>
		</view>
		<view class="c-list">
			<view class="c-row">
				<text class="tit">购买类型</text>
				<text class="tit2">XL 白色</text>
			</view>
			<view class="c-row">
				<text class="tit">优惠券</text>
				<text class="red">领取优惠券</text>
			</view>
			<view class="c-row-list">
				<text class="tit">促销活动</text>
				<view class="text-list">
					<text>新人首单送20元无门槛代金券</text>
					<text>订单满50减10</text>
					<text>订单满100减30</text>
					<text>单笔购买满两件免邮费</text>
				</view>
			</view>
			<view class="c-row">
				<text class="tit">服务</text>
				<text style="color: #303133;">7天无理由退换货 ·</text>
				<text style="color: #303133;">假一赔十 ·</text>
			</view>
		</view>
		<!-- 评价 -->
		<view class="eva-section">
			<view class="e-header">
				<text class="tit">评价</text>
				<text>(86)</text>
				<text class="tip">好评率 100%</text>
			</view>
			<view class="eva-box">
				<image class="portrait" src="http://img3.imgtn.bdimg.com/it/u=1150341365,1327279810&fm=26&gp=0.jpg" mode="aspectFill"></image>
				<view class="right">
					<text class="name">爱吃猫的老鼠</text>
					<text class="con">商品收到了,299元两件,质量不错,试了一下有点瘦,店家服务超好,我很喜欢</text>
					<view class="bot">
						<text class="attr">购买类型：XL 红色</text>
						<text class="time">2018-09-01 19:21</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
				<text class="iconfont icon-shouyeshouye"></text>
				<text>首页</text>
			</navigator>
			<navigator url="/pages/cart/cart" open-type="switchTab" class="p-b-btn">
				<text class="iconfont icon-cart"></text>
				<text>购物车</text>
			</navigator>
			<view class="p-b-btn">
				<text class="iconfont icon-shoucang"></text>
				<text>收藏</text>
			</view>

			<view class="action-btn-group">
				<button type="primary" class=" action-btn no-border buy-now-btn" >立即购买</button>
				<navigator type="primary" class=" action-btn no-border add-cart-btn" url="/pages/cart/cart" open-type="switchTab">加入购物车</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import Api from '../../Api.js';
export default {
	data() {
		return {
			goodsList: [],
			imgUrl: ''
		};
	},
	onLoad(params) {
		var pid = params.pid - 1;
		this.goodsList = Api.goodsList;
		this.imgUrl = this.goodsList[pid].image;
	}
};
</script>

<style lang="scss">
.head {
	text-align: center;
	width: 100%;
	image {
		width: 100%;
		height: 722rpx;
	}
}
/* 标题简介 */
.introduce-section {
	background: #fff;
	padding: 20upx 30upx;
	.title {
		font-size: 32rpx;
		color: #303133;
		height: 50rpx;
		line-height: 50rpx;
	}
	.price-box {
		display: flex;
		align-items: baseline;
		height: 64upx;
		padding: 10upx 0;
		font-size: 26rpx;
		color: #fa436a;
	}
	.price {
		font-size: 34rpx;
	}
	.m-price {
		margin: 0 12rpx;
		color: #909399;
		text-decoration: line-through;
	}
	.coupon-tip {
		align-items: center;
		padding: 4rpx 10rpx;
		background: #fa436a;
		font-size: 24rpx;
		color: #fff;
		border-radius: 6rpx;
		line-height: 1;
		transform: translateY(-4rpx);
	}
	.bot-row {
		display: flex;
		align-items: center;
		height: 50rpx;
		font-size: 24rpx;
		color: #909399;
		text {
			flex: 1;
		}
	}
}
/* 分享 */
.share-section {
	display: flex;
	align-items: center;
	color: #606266;
	padding: 12upx 30upx;
	.share {
		width: 30upx;
		height: 30upx;
		border: 1px solid #fa436a;
		border-radius: 4upx;
		font-size: 22upx;
		color: #fa436a;
	}
	.tit {
		font-size: 28rpx;
		margin-left: 10rpx;
	}
	.share-btn {
		text-align: right;
		font-size: 24rpx;
		color: #fa436a;
	}
}

.c-list {
	width: 100%;
	font-size: 26rpx;
	color: #606266;
	background: #fff;
	.c-row {
		width: 100%;
		padding: 20rpx 30rpx;
		display: flex;
		.tit2 {
			color: #303133;
		}
		.red {
			color: #fa436a;
		}
	}
	.tit {
		width: 140upx;
	}
	.c-row-list {
		width: 100%;
		padding: 20rpx 30rpx;
		display: flex;
		.tit {
			width: 140upx;
			line-height: 5;
		}
		.text-list {
			display: flex;
			flex-direction: column;
			text {
				color: #303133;
			}
		}
	}
}
/* 评价 */
.eva-section {
	display: flex;
	flex-direction: column;
	padding: 20upx 30upx;
	background: #fff;
	margin-top: 16upx;
	.e-header {
		display: flex;
		align-items: center;
		height: 70rpx;
		font-size: 26rpx;
		color: #909399;
		.tit {
			font-size: 30rpx;
			color: #303133;
			margin-right: 4rpx;
		}
		.tip {
			flex: 1;
			text-align: right;
		}
	}
}
.eva-box {
	display: flex;
	padding: 20upx 0;
	margin-bottom: 117rpx;
	height: 230rpx;                                                                                                 
	.portrait {
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		border-radius: 100px;
	}
	.right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		color: #606266;
		padding-left: 26rpx;
		.con {
			font-size: 28rpx;
			color: #303133;
			padding: 20rpx 0;
		}
		.bot {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #909399;
		}
	}
}
/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	left: 30upx;
	bottom: 30upx;
	z-index: 95;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 690upx;
	height: 100upx;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
	border-radius: 16upx;

	.p-b-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		width: 96upx;
		height: 80upx;
		.iconfont {
			font-size: 40upx;
			line-height: 48upx;
		}
		.icon-cart {
			font-size: 46upx;
			color: #909399;
		}
		.icon-shouyeshouye {
			font-size: 46upx;
			color: #909399;
		}
		.icon-shoucang {
			font-size: 46upx;
			color: #fa436a;
		}
	}
	.action-btn-group {
		display: flex;
		height: 76upx;
		border-radius: 100px;
		overflow: hidden;
		box-shadow: 0 20upx 40upx -16upx #fa436a;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
		margin-left: 20upx;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28upx;
			width: 0;
			border-right: 1px solid rgba(255, 255, 255, 0.5);
		}
		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 180upx;
			height: 100%;
			font-size: 28rpx;
			padding: 0;
			border-radius: 0;
			background: transparent;
		}
	}
}
</style>
